<template>
  <div class="apply-step">
    <div class="step-one">
      <a-icon class="icon" type="check-circle"></a-icon>
      <p>提交申请成功</p>
    </div>
    <div class="dotted-box">
      <div class="dotted" v-for="n in 20"></div>
      <div class="message"> 等待审批通过 </div>
      <div class="dotted" v-for="n in 20"></div>
    </div>

    <div class="step-two">
      <a-icon class="icon" type="check-circle" theme="filled"></a-icon>
      <p>账号开通成功</p>
    </div>
  </div>
</template>

<script>
export default{
  components: {},
  props: {
  },
  watch:{
  },
  data(){
    return {

    }
  },
  methods:{}
}
</script>
<style lang="less">
.apply-step {
  width: 520px;
  position: relative;
  display: flex;
  justify-content: space-between;
  color:#000;
  font-size: 16px;
  .icon{
    margin-bottom: 10px;
  }
.step-one {
    width: 120px;
    text-align: center;
    .icon {
      font-size: 32px;
      color: #147092;
    }
}
  .step-two {
    width: 120px;
    text-align: center;
    .icon {
      font-size: 32px;
      color: #649eb3;
    }
  }
  .dotted-box {
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .dotted {
      width: 3px;
      height: 3px;
      margin-right: 2px;
      display: inline-block;
      background: #649eb3;
    }
    .message{
      font-size: 14px;
    }
  }
}
</style>